<template>
  <div class="formPageBox">
    <div class="formTop">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="表单名称" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入表单名称"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        size="mini"
        @click="handleUpdate"
        v-hasPermi="['workflow:form:add']"
        class="addBtn"
        >新增</el-button
      >
    </div>
    <el-table stripe border v-loading="loading" :data="formList">
      <el-table-column label="表单主键" align="center" prop="id" />
      <el-table-column label="表单名称" align="center" prop="name" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetail(scope.row)"
            >详情</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['workflow:form:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['workflow:form:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        :current-page="queryParams.pageNum"
        :page-size="queryParams.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(total)"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog v-model="previewVisible" title="详情" :width="800">
      <div>详情</div>
    </el-dialog>
    <el-dialog v-model="addModal" title="新增" :width="800">
      <el-form :model="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="表名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit"> 确定 </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
export default {
  name: "table2",
  data() {
    return {
      previewVisible: false,
      queryParams: {
        pageNum: 1, //页码
        pageSize: 10, //每页条数
        name: null, //检索条件--表单名称
      },
      total: 0,
      formList: [],
      title: "",
      loading: false,
      ruleForm: {
        name: "", //表名
        remark: "", //备注
      },
      addModal: false,
    };
  },
  methods: {
    handleQuery() {
      this.getFormData();
    },

    handleSizeChange(e) {
      // console.log(e);
      this.queryParams.pageSize = e; //组件封装的方法抛出的e即条数，可在控制台上打印出来看看
      getFormData();
    },
    //页码改变
    handleCurrentChange(e) {
      // console.log(e);
      this.queryParams.pageNum = e;
      getFormData();
    },
    //查看详情
    handleDetail() {
      this.previewVisible = true;
    },
    //点击新增、修改表单
    handleUpdate(row) {
      if (row.id) {
        //修改表单需要给表单赋初值值
        this.ruleForm = row;
      }
      this.addModal = true;
    },
    //提交表单
    handleSubmit() {
      //一般这个时候就提交到后端去了，然后重新调用getFormData()获取新数据
      // 但是没有后端这里直接前端实现了
      let _list = [...this.formList]; //此处为es6的浅拷贝，复制值，指向同一个地址；；  深拷贝：JSON.parse(JSON.stringify(formList.value))
      if (this.ruleForm.id) {
        //有id就是编辑,新增不赋值就没有id（也可以定义一个变量来分辨）
        _list.find((item) => item.id == this.ruleForm.id).name =
          this.ruleForm.name; //找到id相等的那个数据并改变他的相应值（这地方写的不好，数据多就很丑，改进：可以用findIndex先找到数据的坐标然后根据坐标来整体赋值
        _list.find((item) => item.id == this.ruleForm.id).remark =
          this.ruleForm.remark;
      } else {
        //新增
        _list.push({ ...this.ruleForm, id: Math.random() }); //id因为有编辑所以需要唯一
      }
      this.formList = _list;
      this.ruleForm = { name: "", remark: "" }; //重置表单
      this, (addModal = false); //关闭弹窗
    },
    //删除表单
    handleDelete(row) {
      ElMessageBox.confirm(`确定要删除${row.name}吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log("删除");
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "取消成功",
          });
        });
    },
  },
  //一些生命周期
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    this.getFormData();
  },
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>
<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
//vue2脚手架使用element-ui，vue3使用element-plus  两者大差不差就是vue3脚手架不支持element-ui所以使用了element-plus
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
const router = useRouter();//router可以跳转路由（这个页面没有用到
const previewVisible = ref(false); //详情弹窗是否展示
const queryParams = ref({
  //检索信息
  pageNum: 1, //页码
  pageSize: 10, //每页条数
  name: null, //检索条件--表单名称
});
const total = ref(0); //总条数---分页需要
const formList = ref([]); //流程表单表格数据
const title = ref(); //弹出层标题
const loading = ref(false); //表格loading
const ruleForm = ref({
  name: "", //表名
  remark: "", //备注
});
const addModal = ref(false); //编辑or新增visible
//vue3生命周期函数onMounted---dom加载完后调用--此处用来获取初始的表格数据
onMounted(() => {
  getFormData();
});

//获取表格数据
const getFormData = () => {
  //工作红会在这里调用表格数据的接口--为表格赋值
  formList.value = [
    { id: "12", name: "表单1", remark: "1212" },
    { id: "13", name: "表单2", remark: "1212" },
    { id: "14", name: "表单3", remark: "1212" },
  ];
  total.value = 100;
};

//表单检索
const handleQuery = () => {
  getFormData();
};

//条数改变
const handleSizeChange = (e) => {
  // console.log(e);
  queryParams.value.pageSize = e; //组件封装的方法抛出的e即条数，可在控制台上打印出来看看
  getFormData();
};

//页码改变
const handleCurrentChange = (e) => {
  // console.log(e);
  queryParams.value.pageNum = e;
  getFormData();
};

//查看详情
const handleDetail = () => {
  previewVisible.value = true;
};

//点击新增、修改表单
const handleUpdate = (row) => {
  if (row.id) {
    //修改表单需要给表单赋初值值
    ruleForm.value = row;
  }
  addModal.value = true;
};

//提交表单
const handleSubmit = () => {
  //一般这个时候就提交到后端去了，然后重新调用getFormData()获取新数据
  // 但是没有后端这里直接前端实现了
  let _list = [...formList.value]; //此处为es6的浅拷贝，复制值，指向同一个地址；；  深拷贝：JSON.parse(JSON.stringify(formList.value))
  if (ruleForm.value.id) {
    //有id就是编辑,新增不赋值就没有id（也可以定义一个变量来分辨）
    _list.find((item) => item.id == ruleForm.value.id).name =
      ruleForm.value.name; //找到id相等的那个数据并改变他的相应值（这地方写的不好，数据多就很丑，改进：可以用findIndex先找到数据的坐标然后根据坐标来整体赋值
    _list.find((item) => item.id == ruleForm.value.id).remark =
      ruleForm.value.remark;
  } else {
    //新增
    _list.push({ ...ruleForm.value, id: Math.random() }); //id因为有编辑所以需要唯一
  }
  formList.value = _list;
  ruleForm.value = { name: "", remark: "" }; //重置表单
  addModal.value = false; //关闭弹窗
};

//删除表单
const handleDelete = (row) => {
  ElMessageBox.confirm(`确定要删除${row.name}吗?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      console.log("删除");
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消成功",
      });
    });
};
</script>
<style scoped lang="less">
.formPageBox {
  padding: 20px;
  .formTop {
    display: flex;
    justify-content: space-between;
  }
  .pagination {
    margin-top: 20px;
    .el-pagination {
      float: right;
    }
  }
}
</style>
<style lang="less">
.formPageBox {
}
</style>
